<template>
    <div class="search-panel">
        <el-row class="m-header-searchbar">
            <el-col :span="3" class="left">
                <img src="//s0.meituan.net/bs/fe-web-meituan/fa5f0f0/img/logo.png" alt="美团">
            </el-col>
            <el-col :span="15" class="center">
                <div class="wrapper">
                    <el-input v-model="searchWord" placeholder="请输入内容" @focus='focus' @blur="blur"></el-input>
                    <el-button type="primary" icon="el-icon-search" />
                    <dl class="hotPlace" v-if="ishotPlace">
                        <dt>热门搜索</dt>
                        <dd>
                            <router-link :to='{name:"goods"}'>火锅</router-link>
                        </dd>
                         <dd>
                            <router-link to="/s">99旅馆连锁</router-link>
                        </dd>
                        <dd>
                            <router-link to="/s">尚客优快捷酒店</router-link>
                        </dd>
                        <dd>
                            <router-link to="/s">7天连锁酒店</router-link>
                        </dd>
                    </dl>
                    <dl class="searchList" v-if="isSearchList">

                        <dd>
                            <router-link :to='{name:"goods"}'>火锅</router-link>
                        </dd>
                         <dd>
                            <router-link to="/s">火锅自助餐</router-link>
                        </dd>
                        <dd>
                            <router-link to="/f">火锅重庆</router-link>
                        </dd>
                    </dl>

                </div>
                <p class="suggest">
                  <router-link :to='{name:"goods"}'>京东第一火锅</router-link>
                    <a href="#">99旅馆连锁</a>
                    <a href="#">尚客优快捷酒店</a>
                    <a href="#">8天连锁酒店</a>
                </p>
            </el-col>

        </el-row>
    </div>

</template>

<script>
export default {
  name: 'searchbar',
  data () {
    return {
      searchWord: '',
      // ishotPlace:false,
      // isSearchList:false,
      isFocus: false

    }
  },
  computed: {
    ishotPlace: function () {
      return this.isFocus && !this.searchWord
    },
    isSearchList: function () {
      return this.isFocus && this.searchWord
    }
  },
  methods: {
    focus () {
      this.isFocus = true
    },
    blur () {
    //   let self = this
      setTimeout(() => {
        this.isFocus = false
      }, 200)
      // this.isFocus=false
    }
  }
}
</script>

<style lang='scss'>
  @import '@/assets/css/public/header/search.scss' ;
</style>
